import React from 'react';
import { Tooltip } from 'antd';
import VersionList from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import FilterTool from '../../../../components/FilterTool';

class Version extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'version';
    this.listsComponent = VersionList;
    this.queryParams = { third_list_param_id: props.match.params.id };
  }

  refreshFilter = (params, type) => {
    const { third_list_param_id } = this.queryParams;
    this.queryParams = { third_list_param_id, ...params };
    if (type === false) return
    this.freshQueryList(this.queryParams);
  };

  getColumns = () => [
    {
      title: '版本号',
      key: 'version',
      dataIndex: 'version',
      render: (text) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '修改人',
      key: 'update_user_name',
      dataIndex: 'update_user_name',
    },
    {
      title: '修改时间',
      dataIndex: 'update_time',
      key: 'update_time',
      ellipsis: true,
      render: (text) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        );
      },
    },
  ];

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'rangepicker',
        key: 'start',
        name: ['between_start_update_time', 'between_end_update_time'],
        placeholder: ['开始时间', '结束时间'],
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入版本号进行搜索',
      },
    ];
    return (
      <div>
        <div className='flex flex-start'>
          <div className='flex-right-wp'>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              refresh={this.resetList}
              isOnChange={true}
            />
          </div>
        </div>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            mediator={this}
            edit={this.edit}
            showDetail={this.showDetail}
            onChangePagination={this.onChangePagination}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            rowKey='third_list_param_version_id'
          />
        </div>
      </div>
    );
  }
}

export default Version;
